<template>
  <div>
    <div class="FixedBox"><span class="FixedBoxLine"></span>社保</div>
    <a-table :columns="columns" :pagination="{ pageSize: 5 }" :data-source="data" bordered>
      <template v-for="col in ['cardinalityDefault']" :slot="col" slot-scope="text, record">
        <div :key="col">
          <a-input-number
            v-if="record.editable"
            :min="0"
            :max="col === 'cardinalityDefault' ? 1000000000000 : 100"
            :precision="2"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e, record.key, col, 'type1')"
          />
          <template v-else>{{ text || "--" }}</template>
        </div>
      </template>
    </a-table>
    <div class="FixedBox"><span class="FixedBoxLine"></span>医保</div>
    <a-table :columns="columns" :pagination="{ pageSize: 5 }" :data-source="data1" bordered>
      <template v-for="col in ['cardinalityDefault']" :slot="col" slot-scope="text, record">
        <div :key="col">
          <a-input-number
            v-if="record.editable"
            :min="0"
            :max="col === 'cardinalityDefault' ? 1000000000000 : 100"
            :precision="2"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e, record.key, col, 'type2')"
          />
          <template v-else>{{ text || "--" }}</template>
        </div>
      </template>
    </a-table>
    <div class="FixedBox"><span class="FixedBoxLine"></span>公积金</div>
    <a-table :columns="columns" :pagination="{ pageSize: 5 }" :data-source="data2" bordered>
      <template v-for="col in ['cardinalityDefault']" :slot="col" slot-scope="text, record">
        <div :key="col">
          <a-input-number
            v-if="record.editable"
            :min="0"
            :max="col === 'cardinalityDefault' ? 1000000000000 : 100"
            :precision="2"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e, record.key, col, 'type3')"
          />
          <template v-else>{{ text || "--" }}</template>
        </div>
      </template>
    </a-table>
    <!--  -->
    <div style="text-align: center;" class="mt24" v-if="editable">
      <a-button class="mr24" @click="cancel()">取消</a-button>
      <a-button type="primary" @click="save()">确定</a-button>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "项目",
    dataIndex: "itemName",
    scopedSlots: { customRender: "itemName" }
  },
  {
    title: "默认个人缴纳基数",
    dataIndex: "cardinalityDefault",
    scopedSlots: { customRender: "cardinalityDefault" }
  },
  {
    title: "单位缴纳比例",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" }
  },
  {
    title: "个人缴纳比例",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" }
  }
];
import { findEmpSocRelated, empUpdateSocDate } from "./api";
export default {
  props: {
    editable: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    editable(val) {
      console.log(val);
      if (val === true) {
        this.edit();
      }
    }
  },
  data() {
    return {
      defaultEmpId: "",
      companyId: "",
      cacheData: [],
      cacheData1: [],
      cacheData2: [],
      data: [],
      data1: [],
      data2: [],
      record: {},
      columns,
      editingKey: ""
    };
  },
  created() {},
  methods: {
    findEmpSocRelatedFun(defaultEmpId, companyId) {
      this.defaultEmpId = defaultEmpId;
      this.companyId = companyId;
      this.getFindEmpSocRelated();
    },
    getFindEmpSocRelated() {
      findEmpSocRelated({
        empId: this.defaultEmpId,
        companyId: this.companyId
      })
        .then(res => {
          // console.log(res);
          if (res.data.itemList.length === 0) {
            this.data = [];
            this.data1 = [];
            this.data2 = [];
            this.$emit("turnOnEditingFun", false);
          } else {
            this.record = res.data;
            if (!this.record.turnOnEditing) {
              this.$emit("turnOnEditingFun", this.record.turnOnEditing);
            }
            this.data = res.data.itemList.filter(z => z.itemType === 1).filter((item, index) => (item.key = index.toString()));
            this.data1 = res.data.itemList.filter(z => z.itemType === 3).filter((item, index) => (item.key = index.toString()));
            this.data2 = res.data.itemList.filter(z => z.itemType === 2).filter((item, index) => (item.key = index.toString()));
            this.cacheData = this.data;
            this.cacheData1 = this.data1;
            this.cacheData2 = this.data2;
            if (this.data.length === 0 && this.data1.length === 0 && this.data2.length === 0) {
              this.$emit("turnOnEditingFun", false);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange(value, key, column, type) {
      console.log(value, key, column, type);
      const newData = type === "type1" ? [...this.data] : type === "type2" ? [...this.data1] : [...this.data2];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        type === "type1" ? this.data : type === "type2" ? this.data1 : (this.data2 = newData);
      }
    },
    edit() {
      this.data = this.data.filter((item, index) => (item.editable = true));
      this.data1 = this.data1.filter((item, index) => (item.editable = true));
      this.data2 = this.data2.filter((item, index) => (item.editable = true));
    },
    save() {
      const newData = [...this.data, ...this.data1, ...this.data2];
      const data = Object.assign(this.record, { itemList: newData });
      empUpdateSocDate(data)
        .then(res => {
          this.getFindEmpSocRelated();
          this.$emit("closeEdit");
        })
        .catch(err => {
          console.log(err);
        });
    },
    cancel() {
      // console.log(this.cacheData);
      this.data.filter(item => (item.editable = false));
      this.data1.filter(item => (item.editable = false));
      this.data2.filter(item => (item.editable = false));
      this.data = this.cacheData;
      this.data1 = this.cacheData1;
      this.data2 = this.cacheData2;
      this.$emit("closeEdit");
    }
  }
};
</script>
<style scoped lang="scss">
.editable-row-operations a {
  margin-right: 8px;
}
.FixedBox {
  margin: 16px 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  .FixedBoxLine {
    width: 3px;
    height: 20px;
    background: var(--primary);
    border-radius: 2px;
    display: inline-block;
    margin-right: 10px;
  }
}
</style>
